textarea{
	height: 300px;
}
body{
	background: #ffffff;
}
#body{
	width: 100%;
	height: 100%;
	display: flex;
}
#componentLib{ 
	width: 140px;
	height: 100%; 
	overflow: auto;
	text-align: left;
	padding: 5px; 
} 
#UIBox{ 
	width: calc(100% - 440px);
	height: 100%;
	background: #e5e5e5;
	overflow: auto;
}
.component{
	border-radius: 3px;
	border: #eeeeee 1px solid;
	padding: 5px; 
	margin-bottom: 5px;
	display: flex;
	cursor: move;
	background: #FFFFFF;
	width: 130px;
}
.component.add{
	cursor: pointer;
}
.componentName{
	width: calc(100% - 20px);
}
.componentIcon{
	width: 20px;
}
#UIBar{
	width: 100%; 
	background: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	display:flex;
	flex-flow: nowrap;  
	padding: 10px;
	overflow: auto;
}
.uibar-item{
	display: flex;
	flex-flow: nowrap;
	flex-direction: column;
	height: auto;
	min-width: 60px;
	min-height: 30px; 
	margin: 5px;
	border-radius: 3px; 
	border: #eeeeee 1px solid;
	vertical-align: middle;
	cursor: pointer;
}
.uibar-item.active{
	border: #2261E0 1px solid;
	color: #2261E0;
}
.uibar-item-name{
	padding: 4px;
} 
.uibar-item-name i{
	margin-left: 3px;
	margin-right: 3px;
}
.uibar-item-name .aui-icon-delete{
	color: red;
} 
#UIDisplay{
	width: 360px;
	height: calc(100% - 160px);
	background: #ffffff;
	margin-top: 50px; 
	margin-left: auto;
	margin-right: auto;
}
#UIDisplayBar{
	width: 100%;
	height: 25px;
	background: #2261E0;
	display: flex;
}
#UIDisplayBar div{ 
	margin-top: 3px;
	color: #FFFFFF; 
}
#UIDisplayBar #left{
	width: calc(100% - 40px);
	margin-left: 10px;
	line-height: 25px;
}
#UIDisplayBar #time{
	width: 40px;
	line-height: 25px;
}
#pageBar{
	width: 100%;
	height: 50px;
	background: #2261E0;
	display: flex;
}
#pageBar #left{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF; 
	cursor: pointer;
}
#pageBar #right{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF; 
	cursor: pointer;
}
#pageBar #title{
	width: calc(100% - 100px);
	height: 50px;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF; 
}
#pageBar *{
	font-size: 16px;
}
#tabBar{
	display: flex;
	overflow: auto;
}
.tab-item{ 
	display: flex;
	flex-flow: nowrap;
	flex-direction: column;
	text-align: center;    
	margin: 5px;   
	vertical-align: middle;
	cursor: pointer;
}
.tab-item.active{
	border-bottom: #2261E0 2px solid;
	color: #2261E0;
}
.tab-item-name{ 
	padding: 5px; 
} 
.tab-item-name i{
	margin-left: 3px;
	margin-right: 3px;
}
.tab-item-name .aui-icon-delete{
	color: red;
} 
#pageView{
	width: 100%;
	height: calc(100% - 115px); 
	overflow: auto;  
	padding-left: 10px;
	padding-right: 10px;
}
#page-item-putplace{
	width: 100%; 
	padding-top: 5px;
	padding-bottom: 5px;  
	height: 60px;
	border: #2261E0 2px dashed;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #eeeeee;
}
 
.page-item{ 
	width: 340px;
	height: 60px; 
	background: #FFFFFF;
}
.page-tool-box{
	width: 100%; 
	height: 30px;
	margin-bottom: -10px;  
}
.page-tool{
	float: right;
	margin-right: 20px;
	width: auto; 
	height: 30px; 
	border: #EEEEEE 1px solid;
	background: #FFFFFF;
	border-radius: 5px;
	padding: 4px;
}
.page-tool span{
	padding: 4px; 
}
.tool-move{
	cursor: move;
	color: #2261E0;
}
.tool-copy{
	cursor: pointer;
	color: #2261E0;
}
.tool-delete{
	cursor: pointer;
	color: red;
}

.page-content{   
	width: 100%;
	height: 45px;
	border-radius: 5px;
	border: #EEEEEE 1px solid; 
}
.page-name{
	font-size: 10px;
	color: #999999;
}
.page-input input{ 
	border: 0;
}
.page-input{
	width: 100%;
	display: flex;
	flex-flow: row;
}
.input-title{
	width: 60px;
}

#configBox{
	width: 300px;
	height: 100%; 
	overflow: auto;
}
#configBox #controlBtns{ 
	padding: 15px;
	display: flex; 
}

#controlBtns button{
	height: 30px;
	margin-left: 15px;
	margin-right: 15px;
	padding-left:10px;
	padding-right: 10px;
}
#configForm{
	width: 100%;
	height: calc(100% - 60px); 
	overflow: auto;
}
.form{
	width: 100%;
	padding:2px 10px 2px 10px;
	display: flex;
	flex-flow: row;
}
.form-title{
	width: 60px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 14px;
}
.form-input{
	width: calc(100% - 60px);
}
.form-input input[type=text],.form-input select{
	border: 0;
	width: 100%;
	height: 35px; 
	background: #F5F5F5;
}
.form-input textarea{
	border: 0;
	width: 100%;
	height: 80px; 
	background: #F5F5F5;
}
.icon_switch{ 
	margin: 3px 3px 3px 10px; 
	height:28px;
	width: 56px;
	background: url(icon/icon_switch_close.png) no-repeat;
	background-size:100% 100%;  
	cursor: pointer;
}
.icon_switch_open{
	background: url(icon/icon_switch_open.png) no-repeat;
	background-size:100% 100%;  
}

#dragView{   
	width: auto; 
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0; 
	cursor: move; 
}

.currentItem{
	background: #EEEEEE!important;
}

.hide{
	display: none;
}
.form-btn{
	width:80%;
	margin-left: auto;
	margin-right: auto;
	height: 30px;
}